<template>
  <div>    
    <div class="data-list">

      <el-form :inline="true" class="demo-form-inline">
      
        <el-form-item>
          <el-button type="primary" @click="showAddKeywordDialog">新建关注链</el-button>
        </el-form-item>

        <el-table 
        :data="tableData" 
        style="width: 100%">
          <el-table-column prop="url" label="网址" align="center"></el-table-column>
          <el-table-column prop="keyword" label="关键字" align="center" sortable></el-table-column>
        </el-table>  
        <!-- 分页组件 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin-top: 20px;"
        ></el-pagination>

        <!-- 添加关键词的对话框 -->
        <el-dialog 
          title="添加关键词" 
          modal-append-to-body
          v-model="addKeywordDialogVisible"
          width="50%">
          <el-form :model="addKeywordForm" label-width="100px">
            <el-form-item label="网址">
              <el-input v-model="addKeywordForm.url" placeholder="请输入网址" clearable></el-input>
            </el-form-item>
            <el-form-item label="关注点">
              <el-input v-model="addKeywordForm.keyword" placeholder="请输入关注点" clearable></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addKeywordDialogVisible = false" size="small" style="margin-right: 10px;">取 消</el-button>
            <el-button type="primary" @click="confirmAddKeyword" size="small">确 定</el-button>
          </span>
        </el-dialog>

      </el-form>
    </div>

  </div>
</template>

<script>

import { pyPostRequest, pyGetRequest } from '../utils/request';


export default {
  data() {
    return {
      tableData:[],
      url: '',
      keywords: '',
      addKeywordDialogVisible: false,
      sort:'create_time',
      sortOrder:'desc',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      addKeywordForm: {
        url: '',
        keyword: ''
      },
    };
  },
  created() {
    this.loadMonitoredPages();
  },
  methods: {
    handleSubmit() {
      pyPostRequest("/curlWeb/submit",{
        url:this.url,
        keyword:this.keywords
      });
      loadMonitoredPages();
      alert('页面已添加到监控列表');
    },
    loadMonitoredPages() {
      pyGetRequest("/curlWeb/query").then(
        response => {
          console.log(response )
          this.tableData= response.data;
        }
      )
    },
    showAddKeywordDialog() {
      this.addKeywordDialogVisible = true;
    },
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.fetchData(this.currentPage, this.pageSize,this.sort,this.sortOrder,this.search.name,this.search.realm,this.search.meaning);
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.fetchData(this.currentPage, this.pageSize,this.sort,this.sortOrder,this.search.name,this.search.realm,this.search.meaning);
    },
    confirmAddKeyword() {
      if (!this.addKeywordForm.url ) {
        this.$message.error('请输入url');
        return;
      }

      pyPostRequest('/curlWeb/submit', this.addKeywordForm)
        .then(response => {
          this.$message.success('关键词添加成功');
          this.addKeywordDialogVisible = false;
          this.addKeywordForm = {
             url: '',
        keyword: ''
          };
          this.loadMonitoredPages();
        })
        .catch(error => {
          this.$message.error('添加关键词失败');
          console.error('Error adding keyword:', error);
        });
    }
  }
};
</script>

<style scoped>
/* 添加一些基本样式 */
form {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

label {
  margin-bottom: 5px;
  display: block; /* 保持与keywordMeaningList一致 */
}

input {
  padding: 8px;
  font-size: 16px;
  width: 100%; /* 保持与keywordMeaningList一致 */
  box-sizing: border-box; /* 保持与keywordMeaningList一致 */
}

button {
  padding: 10px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  width: 100%; /* 保持与keywordMeaningList一致 */
  box-sizing: border-box; /* 保持与keywordMeaningList一致 */
}

button:hover {
  background-color: #0056b3;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* 新增样式以确保 el-form 和 el-table 占据更多空间 */
.el-form {
  width: 100%;
}

.el-table {
  width: 100%;
}

/* 新增样式以调整按钮的大小和间距 */
.dialog-footer .el-button {
  margin-right: 10px;
  width: 80px; /* 调整按钮宽度 */
}
</style>